"use client"
import classNames from 'classnames'
import { ReactNode, ButtonHTMLAttributes } from 'react'
import "./style.css"
import { Button } from '@/components/ui/button'
import Icon from '@/components/common/icon'

interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
  children: ReactNode
  className?: string
  asChild?: boolean
  variant?: 'primary' | 'outline' | 'secondary' | 'ghost' | 'link',
  size?: 'small' | 'medium' | 'large',
}
const MyButton = ({children, className, variant = 'primary', size = 'medium', asChild = false, ...rest}: Props) => {
  return (
    <Button asChild={asChild} className={classNames('my-button', {
      'primary': variant === 'primary',
      'outline': variant === 'outline',
      'secondary': variant === 'secondary',
      'ghost': variant === 'ghost',
      'link': variant === 'link',
      'small': size === 'small',
      'medium': size === 'medium',
      'large': size === 'large',
    }, className)} {...rest}>
      <span className='flex items-center gap-txt-gap-x md:gap-txt-gap-x-md'>
        {children}
      </span>
    </Button>
  )
}

export default MyButton